<% var item, key %>
<% htmlWebpackPlugin.options.appMountIds = htmlWebpackPlugin.options.appMountIds || [] %>
<% htmlWebpackPlugin.options.lang = htmlWebpackPlugin.options.lang || "en" %>
<% htmlWebpackPlugin.options.links = htmlWebpackPlugin.options.links || [] %>
<% htmlWebpackPlugin.options.meta = htmlWebpackPlugin.options.meta || [] %>
<% htmlWebpackPlugin.options.scripts = htmlWebpackPlugin.options.scripts || []%>
<!DOCTYPE html>
<html lang="<%= htmlWebpackPlugin.options.lang %>" <% if (htmlWebpackPlugin.files.manifest) { %>
  manifest="<%= htmlWebpackPlugin.files.manifest %>" <% } %>>

<head>
  <meta charset="utf-8">
  <meta content="ie=edge" http-equiv="x-ua-compatible">

  <%if (htmlWebpackPlugin.options.useCDN) { %>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/classnames/2.2.6/index.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/history/4.9.0/history.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.6/umd/react.production.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.production.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react-router-dom/5.0.1/react-router-dom.min.js"></script>
  <% } %>

  <%if (htmlWebpackPlugin.options.baseHref) { %>
  <base href="<%= htmlWebpackPlugin.options.baseHref %>">
  <% } %>

  <% if (Array.isArray(htmlWebpackPlugin.options.meta)) { %>
  <% for (item of htmlWebpackPlugin.options.meta) { %>
  <meta<% for (key in item) { %> <%= key %>="<%= item[key] %>" <% } %>><%
      } %>
    <% } %>
    <%
    %>
    <title><%= htmlWebpackPlugin.options.title %></title><%

    if (htmlWebpackPlugin.files.favicon) { %>
    <link href="<%= htmlWebpackPlugin.files.favicon %>" rel="shortcut icon" /><%
    } %><%

    if (htmlWebpackPlugin.options.mobile) { %>
    <meta content="width=device-width, initial-scale=1" name="viewport"><%
    } %><%

    for (item of htmlWebpackPlugin.options.links) { %><%
      if (typeof item === 'string' || item instanceof String) { item = { href: item, rel: 'stylesheet' } } %>
    <link<% for (key in item) { %> <%= key %>="<%= item[key] %>" <% } %> /><%
    } %><%

    for (key in htmlWebpackPlugin.files.css) { %><%
      if (htmlWebpackPlugin.files.cssIntegrity) { %>
    <link href="<%= htmlWebpackPlugin.files.css[key] %>" rel="stylesheet"
      integrity="<%= htmlWebpackPlugin.files.cssIntegrity[key] %>"
      crossorigin="<%= webpackConfig.output.crossOriginLoading %>" /><%
      } else { %>
    <link href="<%= htmlWebpackPlugin.files.css[key] %>" rel="stylesheet" /><%
      } %><%
    } %><%
    if (htmlWebpackPlugin.options.headHtmlSnippet) { %>
    <%= htmlWebpackPlugin.options.headHtmlSnippet %><%
    } %>
    <script src="https://as.alipayobjects.com/g/component/fastclick/1.0.6/fastclick.js"></script>
    <script>
      if ('addEventListener' in document) {
        document.addEventListener('DOMContentLoaded', function () {
          FastClick.attach(document.body);
        }, false);
      }
      if (!window.Promise) {
        document.writeln('<script src="https://as.alipayobjects.com/g/component/es6-promise/3.2.2/es6-promise.min.js"' + '>' + '<' + '/' + 'script>');
      }
    </script>
    <style>
      #root,
      body,
      html {
        height: 100%
      }

      .async_script {
        display: none
      }

      .loader,
      .loader:after,
      .loader:before {
        background: #ed8c3d;
        -webkit-animation: load1 1s infinite ease-in-out;
        animation: load1 1s infinite ease-in-out;
        width: 1em;
        height: 4em
      }

      .loader {
        top: 35%;
        color: #fff;
        text-indent: -9999em;
        margin: 88px auto;
        position: relative;
        font-size: 11px;
        -webkit-transform: translateZ(0);
        -ms-transform: translateZ(0);
        transform: translateZ(0);
        -webkit-animation-delay: -.16s;
        animation-delay: -.16s
      }

      .loader:after,
      .loader:before {
        position: absolute;
        top: 0;
        content: ''
      }

      .loader:before {
        left: -1.5em;
        -webkit-animation-delay: -.32s;
        animation-delay: -.32s
      }

      .loader:after {
        left: 1.5em
      }

      @-webkit-keyframes load1 {

        0%,
        100%,
        80% {
          box-shadow: 0 0;
          height: 4em
        }

        40% {
          box-shadow: 0 -2em;
          height: 5em
        }
      }

      @keyframes load1 {

        0%,
        100%,
        80% {
          box-shadow: 0 0;
          height: 4em
        }

        40% {
          box-shadow: 0 -2em;
          height: 5em
        }
      }
    </style>
</head>

<body><%
    if (htmlWebpackPlugin.options.unsupportedBrowser) { %>
  <style>
    .unsupported-browser {
      display: none;
    }
  </style>
  <div class="unsupported-browser">
    Sorry, your browser is not supported. Please upgrade to the latest version or switch your browser to use this
    site. See <a href="http://outdatedbrowser.com/">outdatedbrowser.com</a> for options.
  </div><%
    } %><%

    if (htmlWebpackPlugin.options.bodyHtmlSnippet) { %>
  <%= htmlWebpackPlugin.options.bodyHtmlSnippet %><%
    } %><%

    if (htmlWebpackPlugin.options.appMountId) { %>
  <div id="<%= htmlWebpackPlugin.options.appMountId %>"><%
      if (htmlWebpackPlugin.options.appMountHtmlSnippet) { %>
    <%= htmlWebpackPlugin.options.appMountHtmlSnippet %><%
      } %>
  </div><%
    } %><%

    for (item of htmlWebpackPlugin.options.appMountIds) { %>
  <div id="<%= item %>"></div><%
    } %><%

    if (htmlWebpackPlugin.options.window) { %>
  <script type="text/javascript"><%
      for (key in htmlWebpackPlugin.options.window) { %>
      window['<%= key %>'] = <%= JSON.stringify(htmlWebpackPlugin.options.window[key]) %>;<%
      } %>
  </script><%
    } %><%

    if (htmlWebpackPlugin.options.inlineManifestWebpackName) { %>
  <%= htmlWebpackPlugin.files[htmlWebpackPlugin.options.inlineManifestWebpackName] %><%
    } %><%

    for (item of htmlWebpackPlugin.options.scripts) { %><%
      if (typeof item === 'string' || item instanceof String) { item = { src: item, type: 'text/javascript' } } %>
  <script<% for (key in item) { %> <%= key %>= "<%= item[key] %>" <% } %>>
  </script><%
    } %><%

    for (key in htmlWebpackPlugin.files.chunks) { %><%
      if (htmlWebpackPlugin.files.jsIntegrity) { %>
  <script src="<%= htmlWebpackPlugin.files.chunks[key].entry %>" type="text/javascript"
    integrity="<%= htmlWebpackPlugin.files.jsIntegrity[htmlWebpackPlugin.files.js.indexOf(htmlWebpackPlugin.files.chunks[key].entry)] %>"
    crossorigin="<%= webpackConfig.output.crossOriginLoading %>"></script><%
      } else { %>
  <script src="<%= htmlWebpackPlugin.files.chunks[key].entry %>" type="text/javascript"></script><%
      } %><%
    } %>

  <% if (htmlWebpackPlugin.options.devServer) { %>
  <script src="<%= htmlWebpackPlugin.options.devServer %>/webpack-dev-server.js" type="text/javascript"></script>
  <% } %>

  <div id="root">
    <div class="loader" />
  </div>
</body>
<script>
    function loadScript(src, cb) {
      //创建一个script元素
      var el = document.createElement('script');
      var loaded = false;
      //设置加载完成的回调事件
      el.onload = el.onreadystatechange = function () {
        //防止重复加载
        if ((el.readyState && el.readyState !== 'complete' && el.readyState !== 'loaded') || loaded) {
          return false;
        }
        //加载完成后将该脚本的onload设置为null
        el.onload = el.onreadystatechange = null;
        loaded = true;
        cb && cb();
      };
      el.async = true;
      el.src = src;
      var body = document.getElementsByTagName('body')[0];
      body.appendChild(el);
    }
  window.onload = function () {
    var scripts = [];
    [].forEach.call(document.getElementsByClassName('async_script'), function (a) {
      scripts.push(a.getAttribute('href'));
    });
    for (var i = 0; i < scripts.length; i++) {
      (function (j) {
        setTimeout(function () {
          loadScript(scripts[j]);
        }, j * 500);
      }(i));
    }
  }
</script>

</html>